<template>
  <view class="icon-list">
    <scroll-view scroll-x @scroll="scroll">
      <view class="list" :style="{ width: `${listWidth}rpx` }">
        <view class="item" v-for="(item, index) in list" :key="index" @click="executeMethods(item)">
          <image :src="item.icon"/>
          <text>{{item.name}}</text>
        </view>
      </view>
    </scroll-view>
    <view class="slide-bar">
      <view :style="{width: `calc(100% - ${indicatorWidth}rpx)`}">
        <view :style="{width: `${indicatorWidth}rpx`, left: `${percentage}%`}"></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    computed: {
      listWidth() {
        let itemWidth = 165
        let len = Math.ceil(this.list.length / 2)
        return len * itemWidth
      },
      // 滑杆移动百分比
      percentage() {
        let { screenWidth, scrollWidth, scrollLeft } = this
        let percentage = scrollLeft / (scrollWidth - screenWidth) * 100
        let num = 6
        
        if(percentage < 0) {
          percentage = percentage / num
        }else if(percentage > 100) {
          percentage = 100 + ((percentage - 100) / num)
        }
        
        return percentage
      }
    },
    data() {
      return {
        indicatorWidth: 32,
        screenWidth: 0,
        scrollWidth: 0,
        scrollLeft: 0,
      }
    },
    mounted() {
      this.getScreenInfo()
    },
    methods: {
      getScreenInfo() {
        uni.getSystemInfo({
          success: (res) => {
            this.screenWidth = res.windowWidth
          }
        })
      },
      scroll(e) {
        this.scrollLeft = e.target.scrollLeft
        this.scrollWidth = e.target.scrollWidth
      },
      executeMethods(item) {
        
      },
      extractedRateUrl(obj) {
      	
      },
      change(e) {
        this.currentPage = e.detail.current
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
 </style>
